.wrap {
    header {
        background-color: #222222;
        .nav-logo {
            height: 50px;
            padding: 5px 0;
            box-sizing: border-box;

            img {
                width: auto;
                height: 100%;
            }
        }

        .navBox {
            display: flex;
            align-items: center;
            margin:0;
            li {
                flex: 1;
                height: 50px;
                line-height: 50px;
                &:hover {
                    background-color: #080808;
                }
                a {
                    display: block;
                    color: #9d9d9d;
                    font-size: 14px;
                    text-align: center;
                    padding: 0;
                    height: 50px;
                    overflow: hidden;
                    &:focus,
                    &:hover {
                        color: #fff;
                    }
                }
            }
        }

        .menu {
            display: none;
        }
        .languageBox {
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            position: relative;
            color: #9d9d9d;
            &::after {
                content: "";
                width: 0;
                height: 0;
                font-size: 0;
                border-width: 8px;
                border-style: solid;
                border-color: #9d9d9d transparent transparent transparent;
                position: absolute;
                left: 100%;
                top: 45%;
            }
            .dropdown{
                background-color: #222222;
                text-align: center;
                overflow: hidden;
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                height: 0;
                visibility: hidden;
                transition: height 0.5s;
                z-index: 1;
                border-radius: 0 0 10px 10px;
            }
            &:hover .dropdown{
                height: 120px;
                visibility: visible;
            }
            &:active .dropdown{
                height: 0;
                visibility: hidden;
            }
        }
    }
    footer{
        position: absolute;
        // bottom: 0;
        left: 0;
        width: 100%;
        background-color: #3b3b3b;
        padding: 35px 0;
        .copyright{
            p{
                margin: 0;
                font-size: 14px;
                color: #a1a3ab;
                a{
                    margin-right: 15px;
                    font-size: 14px;
                    color: #a1a3ab;
                }
                &:last-child{
                    font-size: 11px;
                    margin-top: 13px;
                }
            }
        }
        .contact{
            text-align: right;
            .icon{
                position: relative;
                width: 38px;
                display: inline-block;
                margin: 0 10px;
                &:hover .wechat-code{
                    visibility: visible;
                    opacity: 1;
                }
                .wechat-code{
                    position: absolute;
                    bottom: 100%;
                    left: 50%;
                    transform: translateX(-48%);
                    visibility: hidden;
                    opacity: 0;
                    transition: all .3s;
                }
            }
        }
    }
}

@media screen and (max-width: 991px) {
    .wrap{
        header{
            .languageBox{
                span{
                    display: none;
                }
                .dropdown {
                    width: 50px;
                }
            }
        }
    }
}
@media screen and (max-width: 768px) {
    .wrap{
        header {
            .nav-logo,
            .navBox,
            .languageBox {
                display: none;
            }
            .menu{
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;
                z-index: 10;
                .mobile-logo{
                    width: auto;
                }
                .mobile-icon{
                    img{
                        width: 30px;
                    }
                    &:hover~.mobile-nav {
                        height: 225px;
                    }
                }
                .mobile-nav{
                    position: absolute;
                    padding: 0;
                    top: 100%;
                    left: 0;
                    width: 100%;
                    text-align: center;
                    height: 0;
                    overflow: hidden;
                    transition: height 0.3s;
                    background-color: #222222;
                    li {
                        line-height: 2em;
                        a{
                            color: #9d9d9d;
                        }
                    }
                }
            }
        }
        footer{
            padding: 15px 0;
            .copyright{
                text-align: center;
                p {
                    a {
                        margin: 0 10px;
                    }
                }
            }
            .contact{
                text-align: center;
                margin-top: 10px;
            }
        }
    }
}